<template>
	<view class="enterprise-list">
		<titleName :name="name"></titleName>
		<view class="title-bgc"></view>
		<view class="content-wrap">
			<view class="search-wrap"
				:style="agent== 1 ? 'height:120rpx;background:#f3f5f7':'height:180rpx;background:#fff'">
				<view style="display: flex;justify-content: space-between;">
					<view class="ipt-wrap" :style="itpStyle">
						<view style="margin-left: 10rpx;">
							<uni-data-picker placeholder="区域" v-model="queryParams.district" class="data-picker"
								popup-title="请选择所在地区" :localdata="dataTree" @change="sessionChange">
							</uni-data-picker>
						</view>
						<view class="line"></view>
						<uni-data-select v-if="agent==1" placeholder="企业分类" style="width: 160rpx;"
							v-model="enterpriseType" :localdata="enterpriseSortList" :clear="false">
						</uni-data-select>
						<view class="line" v-if="agent==1"></view>
						<input type="text" placeholder-class="ipt-class" v-model="queryParams.customername "
							placeholder="请输入企业名称" />
					</view>
					<button @click="search">查询</button>
				</view>

				<view class="sellect" v-if="agent!=1">
					<uni-data-select placeholder="企业分类" style="width: 190rpx;" :clear="false" v-model="enterpriseType"
						:localdata="enterpriseSortList">

					</uni-data-select><uni-data-select placeholder="状态" style="width: 190rpx;margin-left: 50rpx;"
						v-model="queryParams.status" :localdata="statusList" :clear="true"></uni-data-select>
				</view>
			</view>

			<view class="unit-num" :style="agent!=1?'margin-top:18rpx':'margint-top:38rpx'">
				共<text>{{totalDate}}</text>个单位
			</view>
			<view class="list"
				:style="agent==1?'height:calc(100vh - 160rpx - 180rpx)':'height:calc(100vh - 160rpx - 251rpx)'">
				<noData v-if="dataList.length==0" />
				<view class="item" v-for="item in dataList" :key="item.id"
					@click="jumpWasteenterprisefiltrate(item.id)">
					<view class="title">
						<view class="name">企业名称：{{item?.customername || item?.enterprisename}}</view>
						<image
							src="https://splendid.oss-cn-beijing.aliyuncs.com/static/imghazardouswaste/right-arrow.png"
							mode=""></image>
					</view>
					<view class="status" v-if="agent!=1">
						<view class="name">状态：</view>
						<view class="val" :style="item.status==1?'color:#0874FA':item.status==2?'color:#FA0808':'color:#0874FA'">
							{{item.status==1?'正常':item.status==2?'停业':'正常'}}
						</view>
					</view>
					<view class="admin" v-if="agent==1">
						排污许可证号：{{item.dischargelicense || '无'}}
					</view>
					<view class="admin">
						环保管理员：{{item?.hbperson || item?.contactperson}}
					</view>
				</view>
			</view>



		</view>

	</view>
</template>

<script setup>
	//红色字体颜色 #FA0808  backgound:#FFC9C9
	//橙色字体颜色 #FA7408  backgound:#FFEAC9
	//产废字体颜色 #FF0000
	//正常字体颜色 #0874FA
	//关闭字体颜色 #FA0808
	//停产字体颜色 #FA0808
	import titleName from '../../components/titleName.vue'
	import noData from '../../components/noDataShow.vue'
	import http from '../../request/index'
	import uploadFile from '../../request/uploadFile.js'
	import {
		onShow,
		onLoad
	} from '@dcloudio/uni-app'
	import {
		reactive,
		ref,
		computed,
		watch
	} from 'vue'
	let adviceTypeList = ref([])
	let enterpriseSortList = ref([])
	let name = ref("处置记录")
	let agent = ref(0)
	let enterpriseType = ref('1')
	let dataList = ref([])
	let totalDate = ref('')
	let treeData = ref([])
	let statusList = ref([])
	let dataTree = ref()
	let queryParams = reactive({
		district: ''
	})
	/* 处置企业 */
	let disposeList = () => {

		http({
			url: "/enterpriseThird/datalist",
			data: {
				...queryParams
			}
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list
				totalDate.value = res.data.total
			}
		})
	}
	/* 产污企业 */
	let getList = () => {
		http({
			url: "/enterprise/datalist",
			data: {
				...queryParams
			}
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list
				totalDate.value = res.data.total
			}
			console.log(res, 'res');
		})
	}
	watch(() => enterpriseType.value, () => {
		if (enterpriseType.value == 1) {
			getList()
		} else {
			disposeList()
		}
	})
	let search = () => {
		if (enterpriseType.value == 1) {
			getList()
		} else {
			disposeList()
		}
	}
	onLoad((e) => {
		console.log(e, 'e');
		agent.value = e.agent
		queryParams.district = Number(e.id)
		console.log(agent.value, 'agent.value');

		if (agent.value == 1) {
			name.value = '企业列表'
		} else {
			name.value = '企业列表'
		}
		getList()
	})

	let itpStyle = computed(() => {
		let color = ''
		let margin = ''
		if (agent.value == 1) {
			color = '#fff'
			margin = '16rpx'
		} else {
			color = '#f3f5f7'
			margin = '0'
		}

		return {
			background: color,
			marginBottom: margin
		}

	})
	/* 处置单位列表 */

	let jumpWasteenterprisefiltrate = (id) => {
		let type = '' //1 企业详情 2 企业设施
		if (enterpriseType.value == 1) {
			type = 2
		} else if (enterpriseType.value == 2) {
			type = 1
		}
		let admin = agent.value
		uni.navigateTo({
			url: `/contorllerPageOther/wasteenterprisefiltrate/wasteenterprisefiltrate?type=${type}&agent=${admin}&id=${id}`
		})
	}

	http({
		url: '/region/datalisttree'
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			let cc = mapTree(data)
			dataTree.value = data


		}

	})

	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B03'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			adviceTypeList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B06'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			statusList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}

	})
	http({
		url: '/listitem/getmodule',
		data: {
			module: 'B05'
		}
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			enterpriseSortList.value = data.map((item) => {
				return {
					text: item.name,
					value: item.id
				}
			})

		}
		console.log(enterpriseSortList.value, 'fs');

	})

	function mapTree(data) {

		if (data.length <= 0) return

		return data.map((item) => {
			item.text = item.regionname
			item.value = item.id


			if (item.lstSubNodes && item.lstSubNodes.length > 0) {
				item.children = item.lstSubNodes
				for (var i = 0; i < item.lstSubNodes.length; i++) {

					item.children[i].text = item.lstSubNodes[i].regionname
					item.children[i].value = item.lstSubNodes[i].id
					if (item.lstSubNodes[i].lstSubNodes && item.lstSubNodes[i].lstSubNodes.length > 0) {
						mapTree(item.lstSubNodes[i].lstSubNodes)
					}


				}
			}
			return item

		})

	}

	http({
		url: '/region/datalisttree'
	}).then((res) => {
		if (res.code == 0) {
			let data = res.data
			mapTree(data)
			treeData.value = data
			console.log(treeData, 'data');
		}

	})
	onShow(() => {

	})
	let sessionChange = (e) => {

		let id = e?.detail?.value[e.detail.value.length - 1]?.value

		queryParams.district = id
	}
	let jumpDetail = () => {
		uni.navigateTo({
			url: "/contorllerPageOther/wasteenterprisefiltrate/wasteenterprisefiltrate?agent=1"
		})
	}
</script>

<style lang="scss" scoped>
	:deep(.ipt-class) {

		font-weight: 400;
		font-size: 24rpx;
		color: #999999;


	}

	:deep(.uni-select) {
		border: none !important;


		font-weight: 400;
		font-size: 25rpx;
		color: #333333;

	}

	:deep(.icon-calendar) {
		display: none;
	}

	:deep(.uni-date__x-input) {
		font-weight: 400;
		font-size: 25rpx;
		color: #333333;
		text-align: center;
	}

	:deep(.input-value-border) {
		border: none !important;
	}

	:deep(.uni-date-editor--x) {
		border: none;
	}

	.enterprise-list {
		width: 100vw;
		height: 100vh;

		.title-bgc {
			width: 750rpx;
			height: 160rpx;
			background: #0874FA;
		}

		.content-wrap {
			width: 100vw;
			height: calc(100vh - 160rpx);
			background-color: #F3F5F7;
			display: flow-root;
			overflow: hidden;

			.list {
				height: calc(100vh - 160rpx - 251rpx);
				display: flex;
				flex-direction: column;
				align-items: center;
				overflow: auto;
				padding-bottom: 30rpx;

				.item:first-child {
					margin-top: 0 !important;
				}

				.item {
					width: 707rpx;
					height: 227rpx;
					background: #FFFFFF;
					border-radius: 14rpx;
					padding: 35rpx 30rpx 40rpx 40rpx;
					margin-top: 25rpx;

					.title {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.name {

							font-weight: 500;
							font-size: 31rpx;
							color: #222222;

						}

						image {
							width: 15rpx;
							height: 25rpx;
						}
					}

					.status {
						display: flex;
						align-items: center;
						margin-top: 22rpx;

						.name {

							font-weight: 400;
							font-size: 28rpx;
							color: #666666;

						}

						.val {
							font-size: 28rpx;
							height: 42rpx;
							// background: #FFC9C9;
							border-radius: 10rpx;
							text-align: center;
							line-height: 42rpx;
							font-weight: 400;

							color: #FA7408;


						}
					}

					.admin {
						margin-top: 22rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;

					}
				}
			}

			.unit-num {

				font-weight: 400;
				font-size: 23rpx;
				color: #333333;

				margin-bottom: 22rpx;
				padding-left: 30rpx;

				text {
					color: #0874FA;
				}
			}

			.search-wrap {
				display: flex;
				flex-direction: column;
				padding: 30rpx 22rpx 0 22rpx;
				justify-content: space-between;
				width: 750rpx;



				.sellect {
					height: calc(190rpx - 66rpx - 42rpx);
					display: flex;
					align-items: center;
				}

				.ipt-wrap {
					width: 574rpx;
					height: 67rpx;

					border-radius: 34rpx;
					display: flex;
					align-items: center;

					input {
						flex: 1;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						padding-left: 10rpx;
						padding-right: 20rpx;
						flex-shrink: 0 !important;
					}

					.line {
						width: 1rpx;
						height: 35rpx;
						background: #E8E8E8;
						margin-left: 8rpx;
						margin-right: 8rpx;
					}
				}

				button {
					width: 118rpx;
					height: 67rpx;
					background: #0874FA;
					border-radius: 34rpx;
					font-weight: 400;
					font-size: 25rpx;
					color: #FFFFFF;
					line-height: 67rpx;

				}
			}



		}
	}
</style>